<template>
  <div class="Area">
    <el-card shadow="never" class="Area__card">
      <div slot="header" class="Area__card__header">
        <el-radio-group class="Area__card__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Area__card__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div class="Area__table" ref="table">
        <div class="Area__table__top">
          <el-button type="primary" round>总销量额</el-button>
          <el-button type="text">销量</el-button>
          <el-button type="text">商品数</el-button>
        </div>
        <tree-table :data="data" :columns="columns" border></tree-table>
      </div>
    </el-card>
  </div>
</template>

<script>

import treeTable from '@/components/TreeTable'

export default {
  name: 'treeTableDemo',
  components: { treeTable },
  data() {
    return {
      columns: [
        {
          text: '地区',
          value: 'area',
          width: 200
        },
        {
          text: '销售额',
          value: 'sale_money'
        },
        {
          text: '销量',
          value: 'sale_num'
        },
        {
          text: '商品数',
          value: 'band_select'
        },
        {
          text: '新进用户',
          value: 'view_num'
        },
        {
          text: '活跃用户用户',
          value: 'goods_select'
        },
        {
          text: '流失率',
          value: 'cust_select'
        }
      ],
      data: [
        {
          id: 0,
          area: '上海市',
          band_select: '888',
          goods_select: '70%',
          cust_select: '1%',
          sale_money:'99.999',
          sale_num:'99.999',
          view_num:'98',

        },
        {
          id: 0,
          area: '江苏省',
          band_select: '888',
          goods_select: '70%',
          cust_select: '1%',
          sale_money:'99.999',
          sale_num:'99.999',
          view_num:'98',
          children: [
            {
              id: 0,
              area: '南通市',
              band_select: '888',
              goods_select: '70%',
              cust_select: '1%',
              sale_money:'99.999',
              sale_num:'99.999',
              view_num:'98',
            }
          ]
        },
        {
          id: 0,
          area: '浙江省',
          band_select: '888',
          goods_select: '70%',
          cust_select: '1%',
          sale_money:'99.999',
          sale_num:'99.999',
          view_num:'98',
          children: [
            {
              id: 0,
              area: '杭州市',
              band_select: '888',
              goods_select: '70%',
              cust_select: '1%',
              sale_money:'99.999',
              sale_num:'99.999',
              view_num:'98',
              children: [
                {
                  id: 0,
                  area: '西湖区',
                  band_select: '888',
                  goods_select: '70%',
                  cust_select: '1%',
                  sale_money:'99.999',
                  sale_num:'99.999',
                  view_num:'98',
                }
              ]
            }
          ]
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.Area {
  padding: 26px 54px;
  height: 100%;
  background-color: #f5f9fe;
  &__table {
    &__top {
      padding-bottom: 20px;
      & /deep/ {
        .el-button {
          font-size: 16px;
          padding: 11px 23px;
        }
      }
    }
  }
  &__card {
    &__header {
      line-height: 25px;
      padding-bottom: 15px;
      &__right {
        float: right;
      }
      & /deep/ {
        .el-button--primary {
          border-radius: 9px;
          width: 70px;
          padding: 5px 20px;
        }
        .el-input__icon {
          height: 25px;
          line-height: 25px;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
	        border-radius: 9px;
          border: none;
        }
        .el-radio-group {
          .is-bordered {
            padding: 0 6px;
            height: 25px;
            line-height: 25px;
            border: none;
            .el-radio__label {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }
      }
    }
  }
}
</style>
